<template>
	<div class="endLive">
		<div class="endLiveCont">
			<div class="bjImg" @touchmove.stop @touch.stop>
				<image src="@/static/image/user/bj.png" mode="" class=""></image>
			</div>

			<div class="endLiveCenter">
				<div class="endLiveCont_back" @click="backBtn()">
					<image src="@/static/image/left.png" mode="" class="endLiveCont_back_img"></image> <span>用户详情</span>

					<!-- <div class="useLable">
						<image src="@/static/image/hex.png" mode="">
							用户标签
					</div> -->
				</div>

			</div>
			<!-- content -->
			<div class='userDetail' @touchmove.stop @touch.stop>
				<div class='userDetail_content'>
					<div class='userDetail_title'>
						<div class='userDetail_line'>

						</div>
						<div class='userDetail_text'>
							基本信息
						</div>
					</div>

					<div class='userDetail_act'>
						<div class='userDetail_left'>
							头像：
						</div>
						<div class='userDetail_right'>
							<u-avatar  :src="userDetail.avatar" mode=""></u-avatar>
						</div>
					</div>

					<div class='userDetail_p'>
						<div class='userDetail_left'>
							用户昵称：
						</div>
						<div class='userDetail_right'>
							{{userDetail.nickname || "游客"}}
						</div>
					</div>
					<div class='userDetail_p'>
						<div class='userDetail_left'>
							手机号：
						</div>
						<div class='userDetail_right'>
							{{userDetail.mobile || '-'}}
						</div>
					</div>
					<div class='userDetail_p'>
						<div class='userDetail_left'>
							来源：
						</div>
						<div class='userDetail_right'>
							{{userDetail.sourceScene}}
						</div>
					</div>
					<div class='userDetail_p'>
						<div class='userDetail_left'>
							最近登陆IP：
						</div>
						<div class='userDetail_right'>
							{{userDetail.ip}}
						</div>
					</div>
					<div class='userDetail_p'>
						<div class='userDetail_left'>
							IP属地：
						</div>
						<div class='userDetail_right'>
							{{userDetail.ipAddress}}
						</div>
					</div>
					<div class='userDetail_p'>
						<div class='userDetail_left'>
							最近收货地址：
						</div>
						<div class='userDetail_right'>
							{{userDetail.address || '未知'}}
						</div>
					</div>
				</div>
				<!-- 直播 -->
				<div class='live_box'>
					<div class='userDetail_title'>
						<div class='userDetail_line'>

						</div>
						<div class='userDetail_text'>
							基本信息
						</div>
					</div>
					<div class='live_box_title'>
						累计观看直播 (场)
					</div>
					<div class='live_box_num'>
						{{userDetail.browseLiveNum}}
					</div>
				</div>
				<!-- 交易 -->
				<div class='jy_box'>
					<div class='userDetail_title'>
						<div class='userDetail_line'>

						</div>
						<div class='userDetail_text'>
							交易数据
						</div>
					</div>
					<div class='jy_cont'>
						<div class='jy_cont_items'>
							<div class='jy_cont_items_top'>
								累计消费金额 (元)
							</div>
							<div class='jy_cont_items_bottom'>
								{{ userDetail.consumeAmount }}
							</div>
						</div>
						<div class='jy_cont_items'>
							<div class='jy_cont_items_top'>
								累计消费订单数
							</div>
							<div class='jy_cont_items_bottom'>
								{{ userDetail.consumeNum }}
							</div>
						</div>
						<div class='jy_cont_items'>
							<div class='jy_cont_items_top'>
								平均订单金额 (元)
							</div>
							<div class='jy_cont_items_bottom'>
								{{ userDetail.avgConsumeAmount }}
							</div>
						</div>
						<div class='jy_cont_items'>
							<div class='jy_cont_items_top'>
								累计退款金额 (元)
							</div>
							<div class='jy_cont_items_bottom'>
								{{ userDetail.refundAmount }}
							</div>
						</div>
						<div class='jy_cont_items'>
							<div class='jy_cont_items_top'>
								累计退款订单数
							</div>
							<div class='jy_cont_items_bottom'>
								{{ userDetail.refundNum }}
							</div>
						</div>
					</div>
				</div>

			</div>


		</div>
	</div>
</template>

<script>
	export default {
		filters: {
			formatDate(v) {
				if (v == 0) {
					return '-'
				}
				const value = v * 1000
				const data = new Date(value);
				const month = data.getMonth() + 1;
				const day = data.getDate();
				const year = data.getFullYear();
				const hours = data.getHours();
				const minutes = data.getMinutes();
				const seconds = data.getSeconds();
				const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				return formattedTime;
			},

		},
		data() {
			return {
				params: {
					customerId: '1803713742077173760',
				},
				loading: false,
				userDetail: {}
			}
		},
		onPullDownRefresh() {
			this.params.page = 1
			this.AnalyzeListAudience = []
			this.loading = false
			this.getUserDetail()
		},
		onLoad(opt) {
			if (opt.customerId) {
				this.params.customerId = opt.customerId || '1803713742077173760'
			}
			this.getUserDetail() //获取用户详情
		},
		methods: {
			backBtn() {
				uni.navigateBack()
			},
			// getTagList
			async getUserDetail() {
				const {
					data
				} = await this.$request(this.$Api.getAudience, {
					customerId: this.params.customerId
				}, "get")
				this.loading = true
				uni.stopPullDownRefresh()
				if (!data.data) return
				this.userDetail = data.data
			},
		}
	}
</script>

<style lang="scss">
	.endLive {
		width: 100%;
		padding: 0 !important;
		margin: 0 !important;
		height: 100vh;
		overflow: hidden;
		background: #FAFBFF !important;
	}

	.userDetail {
		position: fixed;
		top: 138rpx;
		left: 32rpx;
		z-index: 9;
		width: 100%;
		height: 100vh;
		padding-bottom: 250rpx;
		overflow-y: scroll;
	}

	.userDetail_content {
		width: 688rpx;
		height: 624rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #657180;

		.userDetail_p,
		.userDetail_act {
			margin-top: 32rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.userDetail_left {
				min-width: 200rpx;
				max-width: 200rpx;
			}
		}

		.userDetail_act {
			margin-top: 28rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			width: 200rpx;

			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
			}
		}

	}

	.userDetail_title {
		display: flex;
		align-items: center;
		justify-content: flex-start;

		.userDetail_line {
			width: 4rpx;
			height: 32rpx;
			background: #295EFF;
		}

		.userDetail_text {
			font-size: 28rpx;
			color: #1D2129;
			margin-left: 14rpx;
		}
	}

	.live_box {
		width: 686rpx;
		height: 228rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx;
		box-sizing: border-box;
		margin-top: 24rpx;

		.live_box_title {
			font-size: 24rpx;
			color: #8C8C8C;
			margin-top: 28rpx;
		}

		.live_box_num {
			font-size: 32rpx;
			color: #1D2129;
			margin-top: 16rpx;
			font-weight: 500;
		}
	}

	.jy_box {
		width: 686rpx;
		min-height: 228rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx;
		box-sizing: border-box;
		margin-top: 24rpx;
		font-size: 24rpx;
		color: #8C8C8C;

		.jy_cont {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 0 16rpx;
			box-sizing: border-box;
			width: 100%;

			.jy_cont_items {
				margin-top: 32rpx;
				width: 200rpx;

				.jy_cont_items_top {}

				.jy_cont_items_bottom {
					color: #1D2129;
					font-size: 36rpx;
					margin-top: 16rpx;

				}
			}

			.jy_cont_items:nth-of-type(2n) {
				text-align: right;

				.jy_cont_items_bottom {
					text-align: left;
				}
			}
		}
	}

	.endLiveCont {
		width: 100%;
		// height: 100vh;
		position: relative;
		padding: 30rpx 0;
		box-sizing: border-box;
		color: #fff;
		// overflow-y: scroll;



		.endLiveCenter {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			padding: 30rpx 0;
			box-sizing: border-box;
			overflow-y: scroll;
			z-index: 2;

		}

		.bjImg {
			width: 100%;
			min-height: 1628rpx;
			position: absolute;
			left: 0;
			top: 0;
			background: #FAFBFF;
			z-index: 1;

			image {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}

		.endLiveCont_back {
			width: 100%;
			height: 80rpx;
			float: left;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.endLiveCont_back_img {
				width: 58rpx;
				height: 58rpx;
				float: left;
				position: absolute;
				top: 10rpx;
			}

			span {
				font-size: 28rpx;
				margin-left: 72rpx;
				color: #1D2129;
				line-height: 80rpx;
			}

			.useLable {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 172rpx;
				height: 48rpx;
				border-radius: 24rpx;
				border: 2rpx solid #295EFF;
				margin-right: 32rpx;
				padding: 0 18rpx;
				box-sizing: border-box;
				color: #295EFF;
				font-size: 24rpx;
				line-height: 44rpx;

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}



	}
</style>
